<!-- src/App.vue -->
<template>
  <!-- <div class="page-container">
    <div class="page page1">
      <h1>光线投射Raycaster</h1>
      <h3>
        这个类用于进行raycasting（光线投射）。
        光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）
      </h3>
    </div>
    <div class="page page2">
      <h1>基础网格材质(MeshBasicMaterial)</h1>
      <h3>一个以简单着色（平面或线框）方式来绘制几何体的材质。</h3>
    </div>
    <div class="page page3">
      <h1>形状缓冲几何体（ShapeGeometry）</h1>
      <h3>从一个或多个路径形状中创建一个单面多边形几何体。</h3>
    </div>
    <ThreeScene />
  </div> -->
  <ThreeScene />
</template>
<script setup lang="ts">
import ThreeScene from "./components/ThreeScene-深入着色器01.vue";
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.page-container {
  position: relative; /* 确保可以使用 z-index */
  z-index: 10; /* 设置较高的 z-index */
  width: 100vw;
  /* height: 100vh; */
  /* overflow: auto; */
}
</style>
